<!-- 房源信息 step2 -->
<template>
	<div class="houseWrapper">
		<el-breadcrumb separator="/" class="bread-title">
		  <el-breadcrumb-item :to="{ path: '/projectManagement' }">项目管理</el-breadcrumb-item>
		  <el-breadcrumb-item v-if="type==='add'">新建项目</el-breadcrumb-item>
		  <el-breadcrumb-item v-if="type==='edit'">编辑项目</el-breadcrumb-item>
		</el-breadcrumb>
		
		<el-row :gutter="20" style="margin-bottom: 10px;">
		  <el-col :span="6">
		  	<el-button type="primary" @click="addhouse">添加房源</el-button>
		  </el-col>
		  <el-col :span="6" :offset="12">
			<el-button size="small" type="primary" @click="downExcelHandle">下载模板</el-button>
			<a :href="downUrl" ref="downNode" target="_blank"></a>
			<el-button type="primary" @click="uploadall">批量上传</el-button>
		  </el-col>
		</el-row>

		<el-table :data="tableData" border style="width: 100%">
			<el-table-column prop="code" label="房屋编码"  align="center"></el-table-column>
			<el-table-column prop="building" label="楼栋"  align="center"></el-table-column>
			<el-table-column prop="unit" label="单元"  align="center"></el-table-column>
			<el-table-column prop="floor" label="楼层"  align="center"></el-table-column>	
			<el-table-column prop="roomNum" label="房号"  align="center"></el-table-column>	
			<el-table-column prop="ownerNum" label="业主数量"  align="center"></el-table-column>
			<el-table-column prop="ownerName" label="业主姓名"  align="center"></el-table-column>
			<el-table-column prop="ownerType" label="业主类型"  align="center"></el-table-column>
			<el-table-column prop="phone" label="业主电话"  align="center"></el-table-column>
			<el-table-column prop="devname" label="楼盘名称"  align="center"></el-table-column>
			<el-table-column prop="credentials" label="证件类型"  align="center"></el-table-column>
			<el-table-column prop="credentialsNum" label="证件号码"  align="center"></el-table-column>
			<el-table-column prop="qualificationsType" label="购房资质"  align="center"></el-table-column>
			<el-table-column prop="maritalStatus" label="婚姻状况"  align="center"></el-table-column>
			<el-table-column prop="purchaseMode" label="购房方式"  align="center"></el-table-column>
			<el-table-column prop="isfirst" label="是否为首套"  align="center"></el-table-column>
			<el-table-column label="操作"  align="center" width="100">
				<template slot-scope="scope">
					<el-button type="text" @click="btnhander('edit',scope.row,scope.$index)">编辑</el-button>
					<el-button type="text" @click="btnhander('del',scope.row,scope.$index)">删除</el-button>
				</template>
			</el-table-column>
		</el-table>
		
		<div class="pagebar">
		  <el-pagination
		    background
		    layout="total, sizes, prev, pager, next"
		    :current-page.sync="ruleForm.pageNum"
		    :page-sizes="[10, 20, 30, 40]"
		    :page-size="ruleForm.pageSize"
		    @size-change="handleSizeChange"
		    @current-change="handleCurrentChange"
		    :total="totalSize">
		  </el-pagination>
		</div>

		<div class="btngroup" >
			<el-button type="primary" @click="prestephander">上一步</el-button>
			<el-button type="primary" @click="stephander">下一步</el-button>
		</div>



		<el-dialog
		  :title="istype=='add'?'增加房源':'编辑房源'"
		  :visible.sync="centerDialogVisible"
		  width="50%"
		  center
		  @close="cancelhander('ruleForm')"
		  >
			<el-form :model="ruleForm" :rules="rules" ref="ruleForm" label-width="140px" class=" demo-form-inline" :inline='true' >
					<el-form-item label="房屋编号" prop="code" required >
						<el-input v-model="ruleForm.code" style="width: 260px;" placeholder="请输入房屋编号" maxlength="30"></el-input>
					</el-form-item>
					<el-form-item label="楼栋" prop="building" required >
						<el-input v-model="ruleForm.building" style="width: 260px;" placeholder="请输入房屋编号"></el-input>
					</el-form-item>

					<el-form-item label="单元" prop="unit" required >
						<el-input v-model="ruleForm.unit" style="width: 260px;"  placeholder="请输入房屋编号"></el-input>
					</el-form-item>
					<el-form-item label="楼层" prop="floor" required >
						<el-input v-model="ruleForm.floor" style="width: 260px;"  placeholder="请输入房屋编号"></el-input>
					</el-form-item>

					<el-form-item label="房号" prop="roomNum" required >
						<el-input v-model="ruleForm.roomNum" style="width: 260px;"  placeholder="请输入房屋编号"></el-input>
					</el-form-item>
					<el-form-item label="业主类型" prop="ownerType" required >
						<el-select v-model="ruleForm.ownerType" style="width: 260px;" filterable >
							<el-option v-for="item in ownerlist"
								:key="item.id"
								:label="item.label"
								:value="item.id">
							</el-option>
						</el-select>
					</el-form-item>

					<el-form-item label="业主姓名" prop="ownerName" required>
						<el-input v-model.trim="ruleForm.ownerName" style="width: 260px;" placeholder="请输入业主姓名"  maxlength="10"></el-input>
					</el-form-item>
					<el-form-item label="业主电话" prop="phone" required>
						<el-input v-model.trim="ruleForm.phone" style="width: 260px;" placeholder="请输入业主电话" maxlength="11"></el-input>
					</el-form-item>

					<el-form-item label="楼盘名称" prop="devname" required>
						<el-input v-model.trim="ruleForm.devname" style="width: 260px;"  placeholder="请输入楼盘名称" maxlength="15"></el-input>
					</el-form-item>
					<el-form-item label="证件类型"  prop="credentials" required >
						<el-select v-model="ruleForm.credentials" style="width: 260px;" filterable placeholder="请选择证件类型">
							<el-option v-for="item in credentialslist"
								:key="item.id"
								:label="item.label"
								:value="item.id">
							</el-option>
						</el-select>
					</el-form-item>

					<el-form-item label="证件号码" prop="credentialsNum" required>
						<el-input v-model="ruleForm.credentialsNum" style="width: 260px;" placeholder="请输入证件号码"></el-input>
					</el-form-item>
					<el-form-item label="购房资质" prop="qualificationsType" required>
						<el-select v-model="ruleForm.qualificationsType" style="width: 260px;" filterable placeholder="请选择购房资质">
							<el-option v-for="item in qualificationsTypelist"
								:key="item.id"
								:label="item.label"
								:value="item.id">
							</el-option>
						</el-select>
					</el-form-item>

					<el-form-item label="是否首套" prop="isfirst" required>
						<el-select v-model="ruleForm.isfirst" style="width: 260px;" filterable placeholder="请选择是否为首套购房">
							<el-option v-for="item in isfirstlist"
								:key="item.id"
								:label="item.label"
								:value="item.id">
							</el-option>
						</el-select>
					</el-form-item>
					<el-form-item label="购房方式" prop="purchaseMode" required>
						<el-select v-model="ruleForm.purchaseMode" style="width: 260px;" placeholder="请选择购买方式" filterable >
							<el-option v-for="item in purchaseModelist"
								:key="item.id"
								:label="item.label"
								:value="item.id">
							</el-option>
						</el-select>
					</el-form-item>

					<el-form-item label="婚姻状况" prop="maritalStatus" required>
						<el-select v-model="ruleForm.maritalStatus" placeholder="请选择婚姻状况" style="width: 260px;" filterable >
							<el-option v-for="item in maritalStatuslist"
								:key="item.id"
								:label="item.label"
								:value="item.id">
							</el-option>
						</el-select>
					</el-form-item>
			</el-form>

		  <span slot="footer" class="dialog-footer">
		    <el-button @click="cancelhander('ruleForm')">取 消</el-button>
		    <el-button type="primary" @click="ensure('ruleForm')">确 定</el-button>
		  </span>
		</el-dialog>
	</div>
</template>

<script>
	import api from '@/api/apiPath'
	export default {
		data(){
			return {
				type: this.$route.query.type, // 新增，编辑
				downUrl:undefined,
				istype:'add',//是否编辑
				iseditindex:undefined,//记录编辑的索引
				iseditdata:{},//记录编辑后的数据
				rulueform1:{},
				totalSize:0,
				tableData:[
				  {code:1,building:3,unit:2,floor:8,roomNum:20,ownerNum:2,ownerName:'张三、李四', ownerType:2,phone:'15010937066',devname:'霄云路8号',credentials:'身份证',credentialsNum:'12445567676767676',qualificationsType:'持本市工作居住证',maritalStatus:0,purchaseMode:2,isfirst:0},
				  {code:1,building:3,unit:2,floor:8,roomNum:20,ownerNum:5,ownerName:'李四', ownerType:2,phone:'15010937011',devname:'8号',credentials:'身份证',credentialsNum:'12445567676767676',qualificationsType:'持本市工作居住证',maritalStatus:0,purchaseMode:2,isfirst:0},
				  {code:0,building:1,unit:2,floor:6,roomNum:20,ownerNum:1,ownerName:'张三', ownerType:2,phone:'15010937000',devname:'霄云路',credentials:'身份证',credentialsNum:'12445567676767676',qualificationsType:'持本市工作居住证',maritalStatus:0,purchaseMode:2,isfirst:0},
				],
				centerDialogVisible: false,
				ruleForm:{
					code:undefined,//编码
					building:undefined,//楼栋
					unit:undefined,//单元
					floor:undefined,//楼层
					roomNum:undefined,//房号
					ownerNum:undefined,//业主数量
					ownerName:undefined,//业主姓名
					ownerType:undefined,//业主类型
					phone:undefined,
					devname:undefined,//楼盘名称
					credentials:undefined,//证件类型

					qualificationsType:undefined,//资质类型
					maritalStatus:undefined,//婚姻状况
					purchaseMode:undefined,//购房方式
					isfirst:undefined,//是否首套

					pageNum: 0,
					pageSize: 10,
				},
				ownerlist:[
					{id:0,label:'个人'},
					{id:1,label:'境外合资企业'},
					{id:2,label:'法人是外籍人士的企业'},
					{id:3,label:'个人独资企业'},
					{id:4,label:'个体工商户'},
					{id:5,label:'其他类型企事业单位或组织'},
				],
				credentialslist:[
					{id:0,label:'身份证'},
					{id:1,label:'军官证'},
					{id:2,label:'护照'},
					{id:3,label:'其它'},
				],
				qualificationsTypelist:[
					{id:0,label:'本市户籍'},
					{id:1,label:'持本市居住证'},
					{id:2,label:'社保满五年'},
					{id:3,label:'驻地部队现役军人家庭'},
				],
				purchaseModelist:[
					{id:0,label:'全款'},
					{id:1,label:'贷款'},		
				],
				isfirstlist:[
					{id:0,label:'是'},
					{id:1,label:'否'},	
				],
				maritalStatuslist:[
					{id:0,label:'未婚'},
					{id:1,label:'已婚'},	
					{id:2,label:'离异'},
					{id:3,label:'丧偶'},	
				],
				rules:{
					code:[
						{required:true, message:'请输入房屋编号',trigger:'blur'}
					],
					building:[
						{required:true, message:'请输入房屋编号',trigger:'blur'}
					],
					unit:[
						{required:true, message:'请输入房屋编号',trigger:'blur'}
					],
					floor:[
						{required:true, message:'请输入房屋编号',trigger:'blur'}
					],
					roomNum:[
						{required:true, message:'请输入房屋编号',trigger:'blur'}
					],
					ownerType:[
						{required:true, message:'请选择业主类型',trigger:'blur'}
					],
					ownerName:[
						{required:true, message:'请输入业主姓名',trigger:'blur'}
					],
					devname:[
						{required:true, message:'请输入楼盘名称',trigger:'blur'}
					],
					credentials:[
						{required:true, message:'请选择证件类型',trigger:'blur'}
					],
					credentialsNum:[
						{required:true, message:'请输入证件号码',trigger:'blur'}
					],
					qualificationsType:[
						{required:true, message:'请选择证件类型',trigger:'blur'}
					],
					maritalStatus:[
						{required:true, message:'请选择婚姻状况',trigger:'blur'}
					],
					phone: [
					  { required: true, message: '请输入业主电话', trigger: 'blur' },
					  { pattern: /^1(3|4|5|6|7|8)\d{9}$/g, message: '请输入正确的手机号', trigger: 'blur' }
					],
				}
			}
		},
		methods:{
			prestephander(){
				this.$router.push({path:'/baseStep1',query:{type:'add'}})
			},
			stephander(){

			},
			addhouse(){
				this.istype = 'add';
				this.centerDialogVisible = true;
				this.$nextTick(() => {
					this.$refs.ruleForm.resetFields()
				});
			},
			downExcelHandle () {
			  this.$refs.downNode.click()
			},
			uploadall(){

			},
			btnhander(type,row,val){
				if (type == 'edit') {
					this.istype = 'edit';
					this.centerDialogVisible = true
					this.$nextTick(()=>{
						this.iseditindex = val;
						this.iseditdata =  JSON.parse(JSON.stringify(row));
						this.ruleForm =  this.iseditdata
					})

				}else if(type == 'del'){
					this.$confirm('确定删除该房源信息?', '提示', {
					     confirmButtonText: '确定',
					     cancelButtonText: '取消',
					     type: 'warning'
					   }).then(() => {
					     this.tableData.splice(val,1)
					   }).catch(() => {
					     this.$message({
					       type: 'info',
					       message: '已取消删除'
					     });          
					   });
				}
			},
			cancelhander(formName){
				this.$nextTick(() => {
					this.$refs[formName].resetFields();//对整个表单进行重置，将所有字段值重置为初始值并移除校验结
					this.centerDialogVisible = false;
					this.isedit = false;
					this.iseditindex = undefined;
				});
			},
			ensure(formName){
				this.$refs[formName].validate((valid) => {
				  if (valid) {
				  		//编辑数据
				  		if (this.istype =='edit') {
				  			this.tableData.forEach((item,index)=>{
				  				if (index == this.iseditindex) {
				  					let item = JSON.parse(JSON.stringify(this.iseditdata));
									this.$set(this.tableData,index, item)
				  					return;
				  				}
				  			})
				  			this.centerDialogVisible = false
				  		}else if(this.istype =='add') {				  	
						  	let obj = JSON.parse(JSON.stringify(this.ruleForm))
						  	this.tableData.push(obj)
						  	this.centerDialogVisible = false
					  	}
				  }else {
				  	return false
				  }
				});
			}


		}


	}
	
</script>

<style lang="stylus" scoped>
	.houseWrapper
		width: 95%;
		height: 95%;
		.btngroup
			display: table;
			margin: 0 auto;


</style>

